<template>
    <div class="LoginPage" @mousedown="move" @mouseup="moveEnd">
        <i class="iconfont icon-guanbi_o" @click="destroyVC"></i>
        <div class="title">扫码登陆</div>
        <div class="img imgHover" v-if="!okFlag">
            <div class="r">
                <el-image draggable="false" v-show="phoneFlag && showPhoneFlag" ref="imgPhone"
                    class="imgPhone animate__animated animate__fadeInRight" src="../../image/XW8rcLxOev.png"
                    fit="cover"></el-image>
            </div>
            <div class="animate__animated animate__fadeInLeft">
                <div class="qrimg">
                    <el-image draggable="false" ref="imgQr" :src="qrimg" fit="fill" class="qrimgI"></el-image>
                    <div class="blank" id="blank">使用<a ref="a" @click="sendUrl" href="https://music.163.com/#/download"
                            target="_blank">网易云音乐APP</a>扫码登陆</div>
                    <div class="mask" v-show="maskFlag">
                        <span>二维码已失效</span>
                        <el-button @click="updateQr">点击更新</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="ok" v-if="okFlag">
            <el-image src="../../image/SgCjDdGyLg.png"></el-image>
            <span>请在手机上确认登陆</span>
        </div>
        <div class="other" v-if="!okFlag">选择其他登陆方式 ></div>
        <Teleport to="body">
            <Loading v-show="LoadingFlag" :loading="true" width="50" tra="10"></Loading>
        </Teleport>
    </div>
</template>

<script setup lang="ts">
import { useBasicApi,useMain,useGlobalVar } from '../store'
import { getCurrentInstance, ComponentInternalInstance, ref, Ref, onMounted,toRef ,onUnmounted} from 'vue'
import { useRouter } from 'vue-router';
const BasicApi = useBasicApi();
const Main = useMain();
const $router = useRouter()
const globalVar = useGlobalVar()
let key: any = await BasicApi.reqQrKey()
let imgBase64: any = await BasicApi.reqQrImage(key.data.data.unikey)
// 轮询开始
let time = setInterval(async () => {
    let result: any = await BasicApi.reqCheck(key.data.data.unikey)
    if (result.data.code == 800) { //过期
        maskFlag.value = true
        document.querySelector('.img')?.classList.add('imgHoverNo')
    } else if (result.data.code == 802) {
        okFlag.value = true
    } else if (result.data.code == 803) {
        clearInterval(time);
        localStorage.setItem('cookieUser', result.data.cookie)
        login();
    }
}, 1500)
onUnmounted(()=>{
    clearInterval(time);
})
let qrimg = imgBase64.data.data.qrimg

const $el = getCurrentInstance() as ComponentInternalInstance;
let showPhoneFlag: Ref<boolean> = ref(true)
let dom1: any
let dom2: any
let moveFlag: Ref<boolean> = ref(false)
let maskFlag: Ref<boolean> = ref(false)
let okFlag: Ref<boolean> = ref(false)
onMounted(() => {
    dom1 = $el.refs.imgPhone as ComponentInternalInstance
    dom2 = $el.refs.imgQr as ComponentInternalInstance
    dom1 = dom1.$el
    dom2 = dom2.$el
})

let phoneFlag: Ref<boolean> = ref(true)

const sendUrl = (e: Event) => {
    e.preventDefault();
    let t: HTMLElement = e.target as HTMLElement
    electronIpc.ipcSend('new-window', t.getAttribute('href'))
}
let flagLogin: Ref<boolean> = toRef(globalVar,'flagLogin')

const destroyVC = () => {
    flagLogin.value = false
}
let X = 0;
let Y = 0;
let WX = 0;
let WY = 0;
let dom: HTMLElement
let Listener = (e: MouseEvent) => {
    console.log('123');
    if (moveFlag.value) {
        let dom: HTMLElement = document.querySelector('.LoginPage') as HTMLElement
        dom.style.left = WX + (e.pageX - X) + 'px';
        dom.style.top = WY + (e.pageY - Y) + 'px';
    }
}
const move = (e: MouseEvent) => {
    moveFlag.value = true
    X = e.pageX;
    WX = dom.offsetLeft;
    Y = e.pageY;
    WY = dom.offsetTop;
    dom.style.margin = '0 0';
    window.addEventListener('mousemove', Listener)
}
const moveEnd = () => {
    moveFlag.value = false
    window.removeEventListener('mousemove', Listener)
}
onMounted(() => {
    dom = document.querySelector('.LoginPage') as HTMLElement
    electronIpc.ipcSend('get-screen-X-Y')
    electronIpc.ipcOn('there-X-Y', (e: any, obj: any) => {
        let { width, height } = obj;
        dom.style.top = (height - dom.offsetHeight) / 2 + 'px';
        dom.style.left = (width - dom.offsetWidth) / 2 + 'px';
    })
})

//重新获取二维码
const updateQr = async () => {
    key = await BasicApi.reqQrKey()
    imgBase64 = await BasicApi.reqQrImage(key.data.data.unikey)
    qrimg = imgBase64.data.data.qrimg
    maskFlag.value = false
    document.querySelector('.img')?.classList.remove('imgHoverNo')
}
// 登陆
let LoadingFlag: Ref<boolean> = ref(false)
const login = async () => {
    let cookie = localStorage.getItem('cookieUser') as string
    LoadingFlag.value = true
    BasicApi.reqLogin(cookie).then(async(account:any)=>{
        await Main.reqUserPlaylist(account.id);
        await Main.reqUserLike(BasicApi.account?.id)
        await Main.reqUserSubcount();
        LoadingFlag.value = false
        $router.replace({
            name:`FixRoute`,
            query:{
                path:'/app/findMusic/find1'
            }
        });
        await BasicApi.reqRecommendSongs()
        await BasicApi.reqRecommendPlayList()
        await BasicApi.reqProgramRecommend()
        destroyVC();
    })
}
</script>

<style lang="less" scoped>
.LoginPage {
    user-select: none;
    height: 530px;
    width: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 14px;
    color: #666666;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .4);
    z-index: 99999;
    i {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 25px;
        color: #333333;
        cursor: pointer;
    }

    .title {
        font-size: 30px;
        margin-bottom: 10px;
        color: #333333;
        margin-top: 100px;
    }

    .blankAdd {
        left: -70px;
    }

    .img {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        // min-height: 323px;
        .r {
            transition: all 0.6s linear;
        }

        .imgPhone {
            z-index: 1;
        }

        .qrimg {
            z-index: 2;
            position: relative;
            transition: transform 0.4s linear;

            :deep(.mask) {
                position: absolute;
                top: 0;
                left: 0;
                width: 140px;
                height: 140px;
                background-color: rgba(0, 0, 0, .8);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transform: translate(20px, 20px);

                >span {
                    color: white;
                    font-size: 14px;
                    transform: translateY(-8px);
                }

                .el-button {
                    color: white;
                    width: 80px;
                    height: 30px;
                    background-color: #0c73c2;
                    border: none;
                    transform: translateY(8px);
                }
            }

            .qrimgI {
                margin-bottom: 10px;
                transition: transform 0.4s linear;
                transform: scale(0.9, 0.9);
                clip-path: inset(15px 15px 15px 15px);
            }

        }
    }

    .imgHover {
        &:not(:hover) .qrimg {
            transform: translateX(-70px);
        }

        &:not(:hover) .qrimg>.el-image {
            transform: scale(1.2, 1.2)
        }

        &:not(:hover) .r {
            transform: translateX(100px);
            opacity: 0;
        }

        &:not(:hover) .mask {
            width: 180px;
            height: 180px;
            transform: translate(0px, 0px);
        }

        &:hover .mask {
            width: 140px;
            height: 140px;
        }
    }

    .imgHoverNo {
        &:hover .qrimg {
            transform: translateX(-70px);
        }

        &:hover .qrimg>.el-image {
            transform: scale(1.2, 1.2)
        }

        &:hover .r {
            transform: translateX(100px);
            opacity: 0;
        }

        &:hover .mask {
            width: 180px;
            height: 180px;
            transform: translate(0px, 0px);
        }

        &:not(hover) .mask {
            width: 140px;
            height: 140px;
        }
    }

    .blank {
        position: relative;

        a {
            color: #0c73c2;
        }
    }

    .ok {
        display: flex;
        flex-direction: column;
        align-items: center;

        >span {
            color: black;
            font-size: 16px;
        }
    }

    .other {
        margin-top: 50px;
    }
}
</style>